<template>
  <!-- 编辑题库密码 -->
  <el-dialog :visible.sync="localVisible" :title="title" width="500px" @close="handleClose"
    :close-on-click-modal="false" append-to-body>
    <el-form label-width="120px" :model="row" :rules="rules" ref="addObject">
      <el-form-item prop="is_password" label="是否密码访问">
        <!-- <el-input v-model="row.is_password" size="mini" style="width: 300px" show-password></el-input> -->
        <el-switch :value="row.is_password === 1" @change="val => handleSwitchChange(val, row)" active-color="#13ce66"
          inactive-color="#bbbbbb">
        </el-switch>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="row.password" size="mini" style="width: 300px" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="btnOk">确定</el-button>
        <el-button size="mini" @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateSctkPassword } from '@/api/sctk'
export default {
  name: 'updateSctkPassword',
  props: {
    showDialog: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: '编辑密码'
    },
    fk_t_sctk_id: {
      type: Number,
      required: true
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      localVisible: this.showDialog,
      rules: {
        password: [
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        ]
      }
    };
  },
  watch: {
    showDialog(newVal) {
      this.localVisible = newVal;
    },
    localVisible(newVal) {
      if (newVal !== this.showDialog) {
        this.$emit('update:showDialog', newVal);
      }
    }
  },
  methods: {
    btnOk() {
      this.$refs.addObject.validate(async isOk => {
        if (isOk) {

          await updateSctkPassword({ ...this.row, id: this.fk_t_sctk_id })
          // 通知父组件更新
          this.$emit('submit')
          //成功提示
          this.$message.success(`设置成功`)
          //重置表单
          this.handleClose()
        }
      })
    },
    handleClose() {
      this.localVisible = false;
    },
    handleSwitchChange(checked, row) {
      row.is_password = checked ? 1 : 0;
      // 调用接口更新
    }
  }
};
</script>

<style scoped></style>